<template>
	<view class="mainpadding" v-if="pageShow">
		<view class="ershiba xiaohui textcenter margin_top">{{$t('pay.xzf')}}</view>
		<view class="margin_top1 fonweight textcenter" style="font-size: 60rpx;">￥{{payPrice}}</view>
		<!-- <view class="ershiba xiaohui margin_top1 textcenter">剩余时间 23 : 59 : 59</view> -->
		<view class="" style="margin-top:90rpx;">
			<view class=" flexbetween mainpadding" :class="pay_type==10?'yixzbox':'weixbox'" @click="pay_type=10">
				<view class="flexleft">
					<view class="margin_right1">
						<u-icon name="weixin-circle-fill" color="#09BB07" size="28"></u-icon>
					</view>
					<view class="sanshier">{{$t('pay.wx')}}</view>
				</view>
				<view class="weixz margin_right1" v-if="pay_type!=10"></view>
				<view class="margin_right1" v-if="pay_type==10">
					<u-icon name="checkmark-circle-fill" color="#2361FF" size="19"></u-icon>
				</view>
			</view>
			<view class="flexbetween mainpadding margin_top" :class="pay_type==20?'yixzbox':'weixbox'"
				@click="pay_type=20">
				<view class="flexleft">
					<view class="margin_right1">
						<u-icon name="zhifubao-circle-fill" color="#06B4FD" size="28"></u-icon>
					</view>
					<view class="sanshier">{{$t('pay.zfb')}}</view>
				</view>
				<view class="weixz margin_right1" v-if="pay_type!=20"></view>
				<view class="margin_right1" v-if="pay_type==20">
					<u-icon name="checkmark-circle-fill" color="#2361FF" size="19"></u-icon>
				</view>
			</view>
		</view>
		<!-- 固定底部 -->
		<view class="ffffff mainpadding gudingdb" @click="submit()">
			<view class="bigbtn">{{$t('pay.qrzf')}}</view>
		</view>
		<view class="popbox flexcenter" v-if="liheshow">
			<view class="lihebox dingwei">
				<image src="@/static/image/system/sqcg.png" class="liheimg" mode=""></image>
				<view class="flexcolumn lihecontent" style="margin-top: 80rpx;">
					<view class="xiaohei bigtext fonweight">{{$t('pay.qqcg')}}</view>
					<view class="xiaohei ershiba margin_top">{{$t('pay.djxlm')}}</view>
					<view class="xiaolan bigtext fonweight margin_top6">{{comfirmCodeInfo.comfirmCode}}</view>
					<view class="lihebtn" @click="copyCode()">{{$t('pay.fz')}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				pay_type: 10, //支付方式:10=微信,20=支付宝
				type:1,//1点位支付，2确权码支付
				payPrice:"",
				pageShow:false,
				payId:"",
				liheshow:false,
				comfirmCodeInfo:{},//确权码信息
			}
		},
		onLoad(options) {
			this.type = options.type
			this.getDetail(options.type)
			this.getInfo(options.type)
		},
		methods: {
			copyCode(){
				this.liheshow=false;
				this.copy(this.comfirmCodeInfo.comfirmCode)
				setTimeout(()=>{
					uni.reLaunch({
						url:"/pages/index/index"
					})
				},500)
			},
			getInfo(type){
				let url = "/api/v1/userAddress/getInfo"
				if(type==2){
					url = "/api/v1/userCode/getInfo"
				}
				httpRequest.request(url, 'GET', {
				}).then(res => {
					if(res.code==200){
						this.payId = res.data.id
					}
				})
			},
			getDetail(type){
				let text = "position_price"
				if(type==2){
					text = "comfire_price"
				}
				httpRequest.request('/api/v1/protocol/getProtocol', 'GET',{
					protocolType:text
				}).then(res => {
					console.log(res);
					this.payPrice = res.data.protocolContent
					this.pageShow = true
				})
			},
			submit() {
				let url = "/api/v1/pay/authPay"
				if(this.type==2){
					url = "/api/v1/pay/comfirePay"
				}
				let data = {
					orderId: this.payId,
					payType: this.pay_type==10?'weixin':'alipay',
				}
				httpRequest.request(url, 'GET',data).then(res => {
					console.log("支付",res);
					if(res.code==200){
						httpRequest.toast(this.$t('pay.zfcg'))
						if(this.type==1){
							// 支付完成之后要给本地的点位状态改为1待审核
							// 点位状态 0-未申请 1-待审核 2-审核通过 3-审核拒绝
							uni.setStorageSync('mapStatus',1);
							setTimeout(()=>{
								uni.navigateBack(1)
							},1000)
						}else{//获取确权码信息
							this.getcomfirmCode()
							uni.setStorageSync('confirmaStatus',2);
						}
						// if (this.pay_type == 10 && Number(this.payPrice)!=0) {//微信支付
						// 	this.appcallPayMent(res.data.appconfig)
						// }else(this.pay_type == 20 && Number(this.payPrice)!=0){//支付宝支付
						// 	this.appcallPayMentzfb(res.data.appconfig)
						// }
					}else{
						httpRequest.toast(res.msg)
					}
				})
			},
			getcomfirmCode(){
				uni.showLoading({
					mask:true,
					title:"Loading"
				})
				httpRequest.request('/api/v1/userCode/getInfo', 'GET', {
				}).then(res => {
					uni.hideLoading()
					this.comfirmCodeInfo = res.data
					this.liheshow = true
				})
			},
			appcallPayMent(data) {//微信app支付
				console.log(data, 12312121)
				uni.requestPayment({
					provider: 'wxpay',
					orderInfo: data, //后台返回的支付数据
					success: function(res) {
						uni.navigateBack(1)
					},
					fail: function(err) {
						console.log(err)
					}
				});
			},
			appcallPayMentzfb(data) {//支付宝支付
				console.log(data, 12312121)
				uni.requestPayment({
					provider: 'alipay',
					orderInfo: data, //后台返回的支付数据
					success: function(res) {
						uni.navigateBack(1)
					},
					fail: function(err) {
						console.log(err)
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.weixbox {
		background: #FBFCFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		border: 1rpx solid #FBFCFF;
	}

	.yixzbox {
		background: rgba(35, 97, 255, 0.1);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		opacity: 1;
		border: 1rpx solid #2361FF;
	}
</style>
<!-- 礼盒弹框样式 -->
<style>
.popbox{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 10;
		background-color: rgba(0, 0, 0, .3);
	}
	.lihebox{
		width: 590rpx;
		height: 665rpx;
	}
	.liheimg{
		width: 590rpx;
		height: 665rpx;
	}
	.lihecontent{
		width: 590rpx;
		height: 665rpx;
		position: absolute;
		top:0;
		left: 0;
	}
	.lihebtn{
		position: relative;
		top: 80rpx;
		width: 320rpx;	
		height: 88rpx;
		background: linear-gradient( 180deg, #FCEEBF 0%, #F8D76D 100%);
		border-radius: 100rpx;
		text-align: center;
		line-height: 88rpx;
		color:#EF854D;
	}
</style>